<template>
<div class="ec-input-range">
  <!--@input="val.min=val.min.replace(/[^\d]/g,' ')"-->
  <el-input
    v-model="val.min"
    type="number"
    :min="placeholderMin"
    :max="placeholderMax"
    @blur="handleVal"
    :placeholder="placeholderMin"
  ></el-input>
  <div class="pd-lr10">-</div>
  <el-input
    v-model="val.max"
    type="number"

    @blur="handleVal"
    :min="placeholderMin"
    :max="placeholderMax"
    :placeholder="placeholderMax"
  ></el-input>
</div>
</template>
<script>
  export default {
    name: "InputRange",
    data() {
      return {
        val: {
          min:this.orginalVal.min,
          max:this.orginalVal.max
        }
      };
    },
    props: {
      placeholderMin: {
        type: String,
        default: "请输入"
      },
      placeholderMax: {
        type: String,
        default: "请输入"
      },
      orginalVal:{
        type: Object,
        default: function(){
          return {};
        }
      },
      index: {
        type: Number,
        default: 0
      },
      allData: {
        type: Array,
        default: function(){
          return [];
        }
      }
    }, mounted() {
      if (!this.val || !this.val.max || !this.val.min) {
        this.val = {max:"",min:""}
      }
    },
    //父页面数据变化后  重新赋值
    watch: {
      allData: {
        deep: true,
        immediate:true,
        handler: function (newAllData) {
            this.allData = newAllData;
        }
      }
    },
    model: {
      prop: "val",
      event: "input"
    },
    methods: {
      clearData() {
        const _this = this;
        _this.val.min = '';
        _this.val.max = '';
        _this.orginalVal.max = '';
        _this.orginalVal.min = '';

      },
      handleVal() {
        const _this = this;

        if (_this.val.min == "" || _this.val.min == undefined || _this.val.min == null ||
          _this.val.max == "" || _this.val.max == undefined || _this.val.max == null) {
          _this.orginalVal.max = _this.val.max;
          _this.orginalVal.min = _this.val.min;
          _this.$emit("input", {data:_this.orginalVal, index : _this.index});
        } else {
          if (Number(_this.val.min) > Number(_this.val.max)) {
            _this.clearData();
            _this.$emit("input", _this.orginalVal);
            _this.$message({
              type: 'warning',
              message: '区间最小值需要小于等于最大值!'
            });
            return
          } else if (_this.val.max && (Number(_this.val.max) > Number(_this.placeholderMax) || Number(_this.val.max) < Number(_this.placeholderMin))) {
            _this.clearData();
            _this.$emit("input", {data:_this.orginalVal, index : _this.index});
            _this.$message({
              type: 'warning',
              message: '所填最大值超过限制!'
            });
            return
          } else if (Number(_this.val.min) && (Number(_this.val.min) > Number(_this.placeholderMax) || Number(_this.val.min) < Number(_this.placeholderMin))) {
            _this.clearData();
            _this.$emit("input", {data:_this.orginalVal, index : _this.index});
            _this.$message({
              type: 'warning',
              message: '所填最小值超过限制!'
            });
            return
          }
          _this.orginalVal.max = Number(_this.val.max);
          _this.orginalVal.min = Number(_this.val.min);
          //判断所填数据不能在其它data的范围内

          for (var i = 0; i < _this.allData.length; i++){
            var oneData = _this.allData[i];
            if (_this.index != i) {
                //判断是否在其它数据的区间
              if (oneData.min && oneData.max) {
                  if (!(oneData.min > _this.orginalVal.max || oneData.max < _this.orginalVal.min)) {
                    _this.clearData();
                    _this.$message({
                      type: 'warning',
                      message: '楼层区间不能交叉!'
                    });
                    break;
                  }
              }
            }
          }
          _this.$emit("input", {data:_this.orginalVal, index : _this.index});
        }
      }
    }
  };
</script>
<style lang="scss" scoped>
  .ec-input-range{
    display: flex;
  }
  .ec-input-range-divider {
    display: inline-block;
    width: 7px;
    height: 1px;
    background: #c0c4cc;
    margin-bottom: 4px;
  }
  /*清除type=number的上下箭头*/
  /* 在Chrome浏览器下 */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; }
  /* 在Firefox浏览器下 */ input[type="number"]{ -moz-appearance: textfield; }
</style>
